@* 监护数据内容 *@

<div class="charts-container">
    <div class="chart-card">
        <div class="chart-header">
            <h4>监护数据</h4>
        </div>
        <div class="chart-content">
            <style>
                .monitor-grid {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 10px 0;
                    font-size: 12px;
                }

                    .monitor-grid th,
                    .monitor-grid td {
                        border: 1px solid #e0e0e0;
                        padding: 2px;
                        text-align: center;
                        min-width: 40px;
                        height: 25px;
                    }

                        .monitor-grid th:first-child,
                        .monitor-grid td:first-child {
                            text-align: left;
                            background-color: #f8f9fa;
                            font-weight: normal;
                            min-width: 150px;
                        }

                    .monitor-grid .metric-label {
                        display: flex;
                        align-items: center;
                        gap: 5px;
                        padding-left: 8px;
                    }

                    .monitor-grid .metric-color {
                        width: 12px;
                        height: 12px;
                        display: inline-block;
                        border: 1px solid #000;
                        background-color: white;
                    }

                .grid-line {
                    height: 1px;
                    background-color: #e0e0e0;
                    width: 100%;
                }

                .charts-container {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                }

                .chart-section {
                    margin-bottom: 20px;
                }
                /* 心功能图表样式 */
                .heart-function-chart {
                    width: 100%;
                    height: 200px;
                    position: relative;
                    overflow: hidden;
                    border: 1px solid #e0e0e0;
                }

                .chart-sidebar {
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 80px;
                    background-color: #f8f9fa;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    z-index: 1;
                }

                .chart-title {
                    writing-mode: vertical-rl;
                    text-orientation: mixed;
                    font-size: 14px;
                    font-weight: bold;
                    color: #2c3e50;
                }

                .chart-main {
                    margin-left: 80px;
                    height: 100%;
                    background-color: #ffffff;
                    position: relative;
                    overflow: hidden;
                }

                .chart-grid {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-image: linear-gradient(to right, #e0e0e0 1px, transparent 1px), linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
                    background-size: 50px 50px;
                }

                .chart-lines {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                }

                .chart-line {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 1px;
                    background-color: transparent;
                }

                .line-bnp {
                    background-color: rgba(0, 123, 255, 0.7);
                    bottom: 60%;
                }

                .line-co {
                    background-color: rgba(255, 193, 7, 0.7);
                    bottom: 40%;
                }

                .line-sv {
                    background-color: rgba(40, 167, 69, 0.7);
                    bottom: 30%;
                }

                .line-svr {
                    background-color: rgba(108, 117, 125, 0.7);
                    bottom: 50%;
                }

                .chart-point {
                    position: absolute;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                }

                .chart-legend {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background-color: rgba(255, 255, 255, 0.9);
                    padding: 10px;
                    border-radius: 4px;
                    font-size: 12px;
                }

                .legend-item {
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    gap: 5px;
                }

                .legend-color {
                    width: 12px;
                    height: 12px;
                    border: 1px solid #000;
                    background-color: white;
                }

                .chart-scale {
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    font-size: 12px;
                    color: #666;
                }
            </style>

            <!-- SPO2呼吸血压心率图表 -->
            <div class="chart-section">
                <h5 style="color: #2c3e50; margin-bottom: 15px;">SPO2呼吸血压心率</h5>
                <table class="monitor-grid">
                    <thead>
                        <tr>
                            <th></th>
                            <th>0</th>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>8</th>
                            <th>9</th>
                            <th>10</th>
                            <th>11</th>
                            <th>12</th>
                            <th>13</th>
                            <th>14</th>
                            <th>15</th>
                            <th>16</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="metric-label">
                                    <span class="metric-color"></span>
                                    <span>心率 100-32-246-160</span>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-label">
                                    <span class="metric-color"></span>
                                    <span>血压 80-24-210-120</span>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-label">
                                    <span class="metric-color"></span>
                                    <span>CVP 70-20-160-100</span>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>
                                <div class="metric-label">
                                    <span class="metric-color"></span>
                                    <span>SPO2 90-16-190-80</span>
                                </div>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                            <td>J0-12</td>
                            <td>90</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                            <td>30</td>
                            <td>-4</td>
                            <td>30</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                            <td>20</td>
                            <td>0</td>
                            <td>0</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 心功能图表 -->
            <div class="chart-section">
                <div class="chart-header">
                    <h4>心功能</h4>
                </div>
                <div class="heart-function-chart">
                    <div class="chart-main" style="margin-left: 0;">
                        <!-- 网格背景 -->
                        <div class="chart-grid"></div>

                        <!-- 数值刻度 -->
                        <div class="chart-scale">
                            <div style="position: absolute; top: 10px; left: 0;">50</div>
                            <div style="position: absolute; top: 40px; left: 0;">30</div>
                            <div style="position: absolute; top: 70px; left: 0;">10</div>
                            <div style="position: absolute; top: 100px; left: 0;">-10</div>
                            <div style="position: absolute; top: 130px; left: 0;">-30</div>
                            <div style="position: absolute; top: 160px; left: 0;">-50</div>
                        </div>

                        <!-- 折线图 -->
                        <div class="chart-lines">
                            <!-- BNP 线 -->
                            <div class="chart-line line-bnp">
                                @for (int i = 0; i < 17; i++)
                                {
                                    <div class="chart-point" style="background-color: rgba(0, 123, 255, 0.7); left: @(i * 50 + 25)px; bottom: @(Math.Sin(i) * 5 + 0)px;"></div>
                                }
                            </div>

                            <!-- CO 线 -->
                            <div class="chart-line line-co">
                                @for (int i = 0; i < 17; i++)
                                {
                                    <div class="chart-point" style="background-color: rgba(255, 193, 7, 0.7); left: @(i * 50 + 25)px; bottom: @(Math.Cos(i) * 3 + 0)px;"></div>
                                }
                            </div>

                            <!-- SV 线 -->
                            <div class="chart-line line-sv">
                                @for (int i = 0; i < 17; i++)
                                {
                                    <div class="chart-point" style="background-color: rgba(40, 167, 69, 0.7); left: @(i * 50 + 25)px; bottom: @(Math.Sin(i / 2) * 8 + 0)px;"></div>
                                }
                            </div>

                            <!-- SVR 线 -->
                            <div class="chart-line line-svr">
                                @for (int i = 0; i < 17; i++)
                                {
                                    <div class="chart-point" style="background-color: rgba(108, 117, 125, 0.7); left: @(i * 50 + 25)px; bottom: @(Math.Cos(i / 2) * 6 + 0)px;"></div>
                                }
                            </div>
                        </div>

                        <!-- 图例 -->
                        <div class="chart-legend">
                            <div class="legend-item">
                                <span class="legend-color"></span>
                                <span>BNP</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color"></span>
                                <span>CO</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color"></span>
                                <span>SV</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-color"></span>
                                <span>SVR</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 活性药物图表 -->
                <div class="chart-section">
                    <div class="chart-header">
                        <h4>活性药物</h4>
                    </div>
                    <div class="heart-function-chart">
                        <div class="chart-main" style="margin-left: 0;">
                            <!-- 网格背景 -->
                            <div class="chart-grid"></div>

                            <!-- 药物数据 -->
                            <div style="position: relative; height: 100%; width: 100%; display: flex; align-items: center;">
                                <!-- 去甲数据 -->
                                <div style="position: relative; top: 0; width: 100%; padding-left: 20px;">
                                    <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                        <input type="checkbox" checked style="margin-right: 10px;">
                                        <span style="margin-right: 20px;">去甲</span>
                                        <div style="display: flex; gap: 20px;">
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">1个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">4个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">2个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">3个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">3个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">4个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">3个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">1个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">2个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">2个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">3个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">4个</div>
                                            <div style="background-color: #28a745; color: white; padding: 2px 10px; border-radius: 10px; font-size: 12px;">4个</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

